<template>
    <div  v-loading="loading">
        <el-row ref="transData" :testId="testId" style="margin-bottom: 16px;">
            <div class="block">事务名</div>
            <el-select v-model="choice" filterable placeholder="请选择" @change="choiceTrans">
                <el-option v-for="item in trans" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
        </el-row>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" >
            <el-tab-pane label="TPS" name="tps">
                <wetest-line-chart2 ref="transChart" :chart-data="transChartData" />
            </el-tab-pane>
            <el-tab-pane label="响应时间" name="transCost">
                <wetest-line-chart2 ref="costTimeChart" :chart-data="costTimeChartData" />

            </el-tab-pane>
        </el-tabs>

        <el-descriptions class="margin-top" title="请求统计" :column="3" border>
            <el-descriptions-item>

                <template slot="label">
                    总数
                </template>
                {{ this.metric.rxPacks }}
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    成功数
                </template>
                {{ this.metric.succNum }}
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    成功率
                </template>
                {{ this.metric.succRate * 100 }}%

            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    失败数
                </template>
                {{ this.metric.failNum }}
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    错误数
                </template>
                {{ this.metric.errorNum }}
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    超时数
                </template>
                {{ this.metric.timeoutNum }}
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="事务响应耗时" :column="3" border>
            <el-descriptions-item>

                <template slot="label">
                    平均耗时
                </template>
                {{ this.metric.avgCost }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    最大耗时
                </template>
                {{ this.metric.maxCost }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    最小耗时
                </template>
                {{ this.metric.minCost }}ms

            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    50%耗时
                </template>
                {{ this.metric.p50 }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    75%耗时
                </template>
                {{ this.metric.p75 }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    90%耗时
                </template>
                {{ this.metric.p90 }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    95%耗时
                </template>
                {{ this.metric.p95 }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    99%耗时
                </template>
                {{ this.metric.p99 }}ms
            </el-descriptions-item>
            <el-descriptions-item>

                <template slot="label">
                    99.9%耗时
                </template>
                {{ this.metric.p999 }}ms
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions  class="margin-top" title="TPS" :column=1 border>
            <el-descriptions-item>

                <template slot="label">
                    平均TPS
                </template>
                {{ this.metric.tps }}/s
            </el-descriptions-item>
        </el-descriptions>

    </div>
</template>

<style>
.margin-top {
    margin-top: 16px;
    text-align: center;

}
</style>

<script>

import wetestLineChart2 from "./wetestLineChart2"

import { reportTransList, reportStatInfo } from "@/api/wetest/stress";

export default {
    components: {
        wetestLineChart2,
    },
    props: {
        info: {
            type: Object,
            default: null
        }
    },
    watch: {
        info: {
            deep: true,
            handler(val) {
                this.updateData(val);
            }
        }
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中选项卡的 name
            activeName: "tps",
            trans: [],
            choice: [],
            choice_trans: "",
            testId: "",
            transChartData: {
                title: "瞬时TPS趋势",
                cdata: [
                    { name: "", data: [] }
                ],
                yName: "TPS"
            },
            costTimeChartData: {
                title: "事务处理时间",
                cdata: [
                    { name: "最大值", data: [] },
                    { name: "最小值", data: [] },
                    { name: "平均值", data: [] },
                    { name: "中值", data: [] },
                    { name: "p90值", data: [] },
                ],
                yName: "耗时/毫秒"
            },
            metric: {
                rxPacks: 0,
                succNum: 0,
                failNum: 0,
                errorNum: 0,
                timeoutNum: 0,
                succRate: 0,
                tps: 0,
                maxCost: 0,
                minCost: 0,
                avgCost: 0,
                p50: 0,
                p75: 0,
                p90: 0,
                p95: 0,
                p99: 0,
                p999: 0,
            }
        }
    },
    created() {
        this.updateData(this.info);
    },

    methods: {
        updateData(info) {
            if (info != null && info.testId) {
                this.testId = info.testId;
                for (let index = 0; index < info.transMetricList.length; index++) {
                    const element = info.transMetricList[index];
                    if(element.transName=="all") continue;
                    this.trans.push(element.transName);
                }
            }
        },
        getReportTransList() {
            if (this.testId) {
                reportTransList(this.testId).then(response => {
                    console.log(response)
                    let d = response.data
                    this.trans = d
                });
            }
        },
        choiceTrans(val) {

            //console.log(val)
            this.choice_trans = val;
            this.loading=true
            reportStatInfo(this.testId, val).then(response => {
                let d = response.data;
                this.transChartData.cdata[0].data = d.statData;
                this.transChartData.cdata[0].name = this.choice_trans;

                this.costTimeChartData.cdata[0].data = d.maxData;
                this.costTimeChartData.cdata[1].data = d.minData;
                this.costTimeChartData.cdata[2].data = d.avgData;
                this.costTimeChartData.cdata[3].data = d.meanData;
                this.costTimeChartData.cdata[4].data = d.p90Data;

                //let m = d.metric;
                if (this.info != null && this.info.testId) {
                    let v= this.info.transMetricList.filter(it=>it.transName==val);
                    if(v.length>0){
                        this.metric = v[0];
                    }
                }
                this.loading=false;
            });

        
            
        },
        reloyout() {
            //this.$refs.transChart.getChart().resize();
        },
        handleClick() {

        }
    }

}

</script>